<template>
	<view>
		<view class="detail-img">
			<!-- <image :src="detail.detail" mode="aspectFit"></image> -->
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" v-if="detail.images && detail.images.length > 0">
			<!-- <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"> -->
				<swiper-item v-for="(item, index) in detail.images" :key="index">
					<navigator :style="'background: url('+item.images_url+') center center; background-size: cover;'" class="swiper-item" >
						<!-- <image class="swiper1-img" :src="item.images_url"></image> -->
					</navigator>
				</swiper-item>
			</swiper>
		</view>
		<view class="detail-info">
			<view class="detail-info-price"><span>{{detail.score}}</span>积分+￥{{detail.price}}</view>
			<view class="detail-info-name">{{detail.goods_name}}</view>
		</view>
		<view class="detail-specs">
			<view class="detail-specs-spec">
				<label>规格</label>
				<view class="detail-specs-spec-list">
					<view class="detail-specs-spec-item" :class="specIndex == index ? 'detail-specs-spec-item_active':''" v-for="(item,index) in detail.specs"
					 :key="index" @click="changeSpec(index)">{{item.specs_name}}</view>
				</view>
			</view>
			<view class="detail-specs-number"><label>数量</label>
				<uni-number-box :min="min" :max="amount" disabled="true" @getNum="getNum"></uni-number-box>
			</view>
		</view>
		<uni-goods-nav  :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick"></uni-goods-nav>
	</view>
</template> 

<script>
	import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue'
	import uniGoodsNav from '@/components/uni-goods-nav/uni-goods-nav.vue'
	export default {
		components: {
			uniNumberBox,
			uniGoodsNav
		},
		data() {
			return {
				autoplay: true,
				interval: 2000,
				duration: 1000,
				indicatorDots: false,
				market_id: uni.getStorageSync('market_id'), //所属上级ID
				unid: '', //商品ID
				detail: {}, //商品详情内容
				num: 1, //默认商品购买数量
				amount: 10, //库存数量
				min:1,
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#FF9900',
						color: '#FFFFFF'
					},
					// {
					// 	text: '立即购买',
					// 	backgroundColor: '#FFB800',
					// 	color: '#FFFFFF'
					// }
				],
				specIndex: 0,
				num:0
			}
		},
		onLoad(e) {
			this.unid = e.unid;
			this.getDeatil();
		},
		methods: {
			// 获取商品详情
			getDeatil() {
				this.$sapi.apiPost('v1/' + this.market_id + '/mobile/goods/detail/' + this.unid, {
					unid: this.unid
				}).then(res => {
					if (res.data.code == 200 && res.data.data) {
						this.detail = res.data.data;
						this.detail.score = this.detail.specs[this.specIndex].score;
						this.detail.price = this.detail.specs[this.specIndex].price;
					} else {
						this.detail = {};
					}
				})
			},
			// 切换商品规格
			changeSpec(index) {
				this.specIndex = index;
				this.detail.score = this.detail.specs[this.specIndex].score;
				this.detail.price = this.detail.specs[this.specIndex].price;
			},
			// 获取商品购买数量
			getNum(num) {
				this.num = num;
			},
			// 底部左侧点击（店铺||购物车）
			onClick(e) {
				if(e.index == 0) {
					uni.navigateBack({
						delta: 1
					})
				} else if(e.index == 1) {
					uni.navigateTo({
						url: 'car'
					})
				}
			},
			// 底部右侧点击（加入购物车||立即购买）
			buttonClick(e) {
				if(e.index == 0) {
					this.$sapi.apiPost('v1/' + this.market_id + '/mobile/car/num/increase', {
						goods_id: this.unid,
						specs_id:this.detail.specs[this.specIndex].unid,
						number:this.num
					}).then(res => {
						if (res.data.code==200) {
							uni.showToast({
								title: '添加成功，在购物车等亲~',
								icon:"none"
							});
						} else {
							
						}
						
					});
				}
				if(e.index == 1) {
					uni.navigateTo({
						url: 'pay?goodId='+this.unid+'&num='+this.num
					})
				}
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #F7F7F7;
		margin-bottom: 130upx;
	}

	// 商品图片
	.detail-img {
		height: 480upx;
		// width: calc(100% - 240upx);
		width: 100%;
		// padding: 60upx 120upx;
		background-color: #F5F7F9;
		.swiper{
			width: 100%;
			height: 100%;
			.swiper-item {
				width: 100%;
				height: 100%;
				image {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
		}
		
	}

	// 商品详情
	.detail-info {
		margin-bottom: 30upx;
		padding: 30upx 30upx 20upx;
		background-color: #FFFFFF;

		.detail-info-price {
			color: #FF0000;
			font-size: 26upx;
			font-weight: 300;

			span {
				font-size: 50upx;
				font-weight: 500;
				margin-right: 8upx;
			}
		}

		.detail-info-name {
			color: #333333;
			font-size: 34upx;
		}
	}

	// 商品规格
	.detail-specs {
		padding: 40upx 30upx;
		margin-bottom: 30upx;
		background-color: #FFFFFF;

		.detail-specs-spec label,
		.detail-specs-number label {
			color: #2D5363;
			font-size: 30upx;
			margin-right: 24upx;
			white-space: nowrap;
		}

		.detail-specs-spec {
			display: flex;

			.detail-specs-spec-list {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				.detail-specs-spec-item {
					color: #FFFFFF;
					background-color: #DADFE6;
					border-radius: 8upx;
					margin-right: 16upx;
					margin-bottom: 16upx;
					padding: 4upx 6upx;
				}

				.detail-specs-spec-item_active {
					background-color: #FF9900;
				}
			}
		}
	}
</style>
